<template>
  <div style="background-color: white;height: 1000px">
<!--    <div class="imgbox"></div>-->
<!--    <img class="imga" alt="" :src="require('@/assets/shopModel/b1.jpg')">-->

    <div class="zbig">
      <img class="imgb" :src="require('@/assets/shopModel/b1.jpg')">
    </div>
  </div>
</template>

<script>
import {getName, getPhoto, getToken} from "@/utils/auth";

export default {
  name: 'Test'
}
</script>

<style lang="scss" scoped>

.zbig{
  width:400px;
  height:400px;
  position:absolute;
  z-index: 3;
  top:20px;
  left:20px;
  margin-left:4px;
  overflow:hidden;
  display:block;
  border:1px solid #0F9B4E;
  background-color: red;

  .imgb{
    width:800px;
    height:800px;
    left: -100px;
    position:relative;
  }
}





.imgbox{
  width: 200px;
  height: 140px;
  position: relative;
  overflow: hidden;
}

.imga{
  width: 100%;
}

.imgbox:after{
  position:absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgb(0,0,0,0.5);
  content: attr(data-text);
  transition: all 1s ease;
  transform: translateY(-100%);
  color: #FFF;
}

.imgbox:hover:after{
  transform: translateY(0);
}
</style>
